<template>
  <div class="audition8">
    <p>1. 写法不同，而且箭头函数都是匿名函数</p>
    <code class="code">
      const fn = () => {xxx}
    </code>
    <p>2. 箭头函数不能用于构造函数，不能使用new</p>
    <code class="code">
      let Star = (age) => {<br />
        <span class="indient">this.age = age</span><br />
      }<br />
      let dili = new Star(18)<br />
      console.log(dili)<br />
      // 输出结果 报错<br />
      <span class="color">Uncaught TypeError: Star is not a constructor</span>
    </code>
    <p>3. 没有自己的this，箭头函数中的this只能捕获上下文中的this供自己使用</p>
    <v-md-preview :text="text1" />
    <p>4. 箭头函数没有自己的arguments，而是用...rest的形式代替</p>
    <p>arguments是伪数组，而rest是真数组</p>
    <v-md-preview :text="text2" />
    <p>5. 箭头函数的this指向不受call , apply等的影响</p>
    <v-md-preview :text="text3" />
    <p>6. 箭头函数没有prototype</p>
    <v-md-preview :text="text4" />
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition8',
  data() {
    return {
      text1: `${prefix}
        var a = 1
        var obj = {
          a: 2,
          b: () => {
            console.log('b-a: ', this.a)
          },
          c: function() {
            console.log('c-a: ', this.a)
          }
        }
        obj.b() // 1
        obj.c() // 2
      \n${suffix}`,
      text2: `${prefix}
        function a(a) {
          console.log(arguments)
          console.log(Array.isArray(arguments)) // false
        }
        a(1, 2, 3) // [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

        var b = (b) => {
          console.log(arguments)
        }
        b(1, 2, 3) // Uncaught ReferenceError: arguments is not defined

        var c = (...rest) => {
          console.log(rest)
          console.log(Array.isArray(rest)) // true
        }
        c(1, 2, 3) // [1, 2, 3]
      \n${suffix}`,
      text3: `${prefix}
        var a = 1
        var fn1 = function() {
          var a = 2
          fn1.call(fn2, this.a)
        }
        var fn2 = () => {
          console.log(this.a)
        }
        fn2() // 1
      \n${suffix}`,
      text4: `${prefix}
        var fn = function() {}
        console.log(fn.prototype) // {constructor: ƒ}
        
        var fn2 = () => {}
        console.log(fn2.prototype) // undefined
      \n${suffix}`,
    }
  }
}
</script>

<style lang="less" scoped>

</style>